import React from 'react';
import _ from 'lodash';
import classNames from 'classnames';

interface IFormProps extends React.FormHTMLAttributes<HTMLFormElement>, React.ClassAttributes<HTMLFormElement> { }

interface IFormFieldsProps extends React.HTMLAttributes<HTMLDivElement>, React.ClassAttributes<HTMLDivElement> {
    inline?: boolean,
}

const Form_ = (props: Readonly<IFormProps>): JSX.Element => {
    const { className, ...restProps } = props;

    const handleSubmit = (evt: React.FormEvent<HTMLFormElement>): void => {
        evt.preventDefault();

        const ele = document.querySelector(':focus');
        if (ele) { (ele as HTMLElement).blur(); }
    }

    return <form className={classNames(className)} {...restProps} onSubmit={handleSubmit}>
        {props.children}
    </form>
};

Form_.defaultProps = {
    className: 'ui form',
}

const FormFields_ = (props: Readonly<IFormFieldsProps>): JSX.Element => {
    const { className, ...restProps } = props;

    return <div className={classNames(className, { inline: props.inline })} {...restProps} >
        {props.children}
    </div>
};

FormFields_.defaultProps = {
    className: 'fields',
    inline: true,
};

const Form = React.memo(Form_);
const FormFields = React.memo(FormFields_);

export { Form, FormFields };